<template>
  <el-dialog
    :title="$t('flowInstance.freeJump')"
    :model-value="visible"
    @close="onClose"
  >
    <el-form :model="form" label-width="100px" ref="form">
      <el-form-item :label="$t('flowInstance.current')" prop="currentLink">
        <span>{{ form.currentLink }}</span>
      </el-form-item>
      <el-form-item :label="$t('flowInstance.target')" prop="targetLink">
        <el-input
          v-model="form.targetLink"
          @focus="jumpBpmnVisible = true"
          suffix-icon="el-icon-search"
        />
      </el-form-item>
      <el-form-item :label="$t('flowInstance.handler')" prop="user">
        <user v-model="form.username" />
      </el-form-item>
      <el-form-item :label="$t('flowInstance.reason')" prop="reason">
        <el-input v-model="form.reason"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="onClose">{{ $t("common.cancel") }}</el-button>
      <el-button type="primary" @click="onSubmit">{{
        $t("common.ok")
      }}</el-button>
    </template>
  </el-dialog>
  <bpmn
    :proInsId="proInsId"
    :procDefId="procDefId"
    v-if="jumpBpmnVisible"
    v-model="jumpBpmnVisible"
    v-model:label="form.targetLink"
    v-model:value="form.target"
  />
</template>

<script>
import User from "./User";
import Bpmn from "./Bpmn";

export default {
  name: "自由跳转流程",
  components: {
    User,
    Bpmn,
  },
  props: {
    visible: {
      type: Boolean,
      require: true,
    },
    proInsId: {
      type: String,
      require: true,
    },
    updateData: {
      type: Function,
      default() {
        return () => {
          console.log();
        };
      },
    },
    procDefId: {
      type: String,
      require: true,
    },
  },
  emits: ["update:visible"],
  data() {
    return {
      jumpBpmnVisible: false,
      dialogVisible: false,
      form: {
        processInstanceId: this.proInsId,
        currentLink: "",
        current: "",
        target: "",
        targetLink: "",
        username: "",
        reason: "",
      },
    };
  },
  methods: {
    onClose() {
      this.$refs.form.resetFields();
      this.$emit("update:visible", false);
    },
    async getTaskData() {
      const retData = await this.$store.dispatch(
        "historyListStore/getTaskCurrent",
        this.proInsId
      );
      if(!retData) return
      this.form.currentLink = retData[0]?.name;
      this.form.current = retData[0]?.taskDefinitionKey;
    },
    onSubmit() {
      this.$refs.form.validate((validate) => {
        if (validate) {
          const params = {
            current: this.form.current,
            target: this.form.target,
            reason: this.form.reason,
            processInstanceId: this.form.processInstanceId,
            username: this.form.username,
          };
          const status = this.$store.dispatch(
            "flowInstance/jumpFreeRequest",
            params
          );
          if (status) {
            this.updateData();
            this.$emit("update:visible", false);
          }
        }
      });
    },
  },
  created() {
    this.getTaskData();
  },
};
</script>

<style>
</style>
